<template>
  <div> 
  </div>
</template>

<script>
export default {
  props: ['send_data' ],
  data(){
    return {
      webstock: null, // new WebSocket(http_ip);
      send_socketArr: [], // 定义全局变量传给socket
      new_arry: [],
      showXmlData: []
    }
  },
  methods:{
    //封装websocket
    socket() {
      if (typeof WebSocket != "undefined") {
        this.initWebSocket(); // 开启WebSocket长连接
      } else {
        this.$alert("您的浏览器不支持Websocket通信协议，请使用Chrome或者Firefox浏览器！","温馨提示：");
      }
    },
    /**
     * webstocket 开启长连接
     */
    initWebSocket() {
      //页面刚进入时开启长连接
      // const http_ip ="ws://" +this.$store.state.user.Websocket_AlarmDispatchSrv_ip +":" +
      // this.$store.state.user.Websocket_AlarmDispatchSrv_port;
      const http_ip = "ws://192.168.25.41:7001/";
      this.webstock = new WebSocket(http_ip);
      console.log("ip:", http_ip);
      this.webstock.onopen = this.webstockonopen;
      this.webstock.onmessage = this.webstockonmessage;
      this.webstock.onclose = this.webstockclose;
      this.webstock.onerror = this.webstockonerror;
    },
    /**
     * webstock连接成功
     */
    webstockonopen(onopen) {
      console.log("websocket open 连接成功", onopen,this.send_socketArr,this.showXmlData);
      this.webstock.send(JSON.stringify(this.send_socketArr));
    },
    /**
     * webstock接收消息
     */
    webstockonmessage(message) {
      let webstockArr = JSON.parse(message.data);
      // console.log("返回webstockArr:", webstockArr);
      if (webstockArr == "") {
        // this.$alert("websocket未连接，加载Topo图初始状态","温馨提示：");
      } else {
        // debugger;
        if ( this.showXmlData.length <= 0 ) return false;
        if ( webstockArr.length <= 0 ){
          return false;
        } else {
          webstockArr.map(k=>{
            let index = this.new_arry.findIndex(v => v.id === k.deviceId)
            if( index > -1) {
              this.new_arry[index].name = k.deviceName
              this.new_arry[index].level = k.alarmLevel
              this.new_arry[index].status = k.alarmValue
            } else {
              this.new_arry.push({id:k.deviceId, name:k.deviceName,level:k.alarmLevel,status:k.alarmValue})
            }
          })
          console.log('组装完成的所有设备信息', this.new_arry)
          this.showXmlData.map(v=>{
            this.new_arry.map(k=>{
              if ( v.deviceId  && v.deviceId == k.id ) {
                //如果设备ID相等 0黑色，1黄色，2粉红色，3紫色，4红色, -1灰色---未知状态
                v.statusLevel = k.level
                v.statusValue = k.status
              } else{
                //如果设备ID不相等，或者deviceId不存在
              }
            })
          })
        }
      }
      console.log("this.showXmlData:", this.showXmlData);
      this.new_showXmlData = this.showXmlData;
      this.$Message.success('加载设备拓扑图成功！');
    },
    /**
     * webstock关闭
     */
    webstockclose(event) {
      console.log("websocket close"); //监听关闭
    },
    /**
     * webstock出错
     */
    webstockonerror(error) {
      // console.log("websocket error");
      this.webstock.close(); //关闭websocket
      this.initWebSocket(); // 开启WebSocket长连接
    }
  },
  watch:{
    send_data:function(val){
      console.log("val:", val);
      if(val){
        this.send_socketArr = val;
        console.log("this.send_socketArr：", this.send_socketArr);
      }
    }
  },
  created(){

  },
  mounted(){

  }
}
</script>